<template>
  <p-card :bordered="false" :class="'cust-erp-sub-tab'" >
     <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <p-form layout="inline" @keyup.enter.native="searchQuery">
            <p-row  >
              <p-col :xl="6" :lg="7" :md="8" :sm="24">
                <p-form-item label="条码明细">
                  <p-input placeholder="请输入条码明细" v-model="searchInput"></p-input>
                </p-form-item>
              </p-col>
              <p-col :xl="6" :lg="7" :md="8" :sm="24">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <p-button type="primary" @click="searchQuery" icon="search">查询</p-button>
                  <p-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</p-button>
                </span>
              </p-col>

            </p-row>
          </p-form>
        </div>
        <!-- 查询区域-END -->



    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <p-dropdown v-if="selectedRowKeys.length > 0">
        <p-menu slot="overlay">
          <p-menu-item key="1" @click="batchDel"><p-icon type="delete"/>删除</p-menu-item>
        </p-menu>
        <p-button style="margin-left: 8px"> 批量操作 <p-icon type="down" /></p-button>
      </p-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <p-checkbox :indeterminate="indeterminate" v-model="checkAll" :checked="checkAll" @change="onCheckAllChange">全选</p-checkbox>
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ defaultCheckedList.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <p-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }" :data-source="searchList">
          <p-list-item slot="renderItem" slot-scope="item">
            <p-card >
              <p-checkbox @change="onChange" :checked="item.checked" :id="item.id"  :key="item.id"></p-checkbox>
              {{item.barcode}}
            </p-card>
          </p-list-item>
        </p-list>

    </div>

  </p-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import ButtonExpHandler from '@/components/jeecgbiz/modules/ButtonExpHandler'
  import { postAction,getAction,deleteAction } from '@/api/manage'

  const defaultCheckedList=[]
  export default {
    name: "MesBcSupperFieldList",
    mixins:[JeecgListMixin],
    props:{
      mainId:{
        default:'',
        required:false
      }
    },
    watch:{
      mainId(){
          this.mainId.forEach((item)=>{item.checked=true})
          this.defaultCheckedList=this.mainId
          this.plainOptions=this.mainId
          this.searchList=this.mainId
      },
      plainOptions(){
        this.$emit('fromChild', this.plainOptions)
      }
    },
    data () {
      return {
      checkedList: defaultCheckedList,
      indeterminate: false,
      checkAll: true,
      defaultCheckedList:[],
      plainOptions:[],
      searchList:[],
      searchInput:'',

        description: '关键字段信息管理页面',
        disableMixinCreated:true,
        EnhanceJS:'',
        cgButtonLinkList: [],
        cgButtonList: [],
        code: '',
        // 表头
        columns: [
          {
            title: "序号",
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align: 'center',
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'供应商编码',
            align: 'center',
            dataIndex: 'custno',
          },
          {
            title:'供应商名称',
            align: 'center',
            dataIndex: 'custname',
          },
          {
            title:'供应商字段字符',
            align: 'center',
            dataIndex: 'supplierFieldCharacter',
          },
          {
            title:'说明',
            align: 'center',
            dataIndex: 'notice',
          },
          {
            title:'备注',
            align: 'center',
            dataIndex: 'remark',
          },
          {
            title:'创建人',
            align: 'center',
            dataIndex: 'createBy',
          },
          {
            title:'创建日期',
            align: 'center',
            dataIndex: 'createTime',
          },
          {
            title:'更新人',
            align: 'center',
            dataIndex: 'updateBy',
          },
          {
            title:'更新日期',
            align: 'center',
            dataIndex: 'updateTime',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: '/mes-code/mesBcField/listMesBcSupperFieldByMainId',
          delete: '/mes-code/mesBcField/deleteMesBcSupperField',
          deleteBatch: '/mes-code/mesBcField/deleteBatchMesBcSupperField',
          getColumns: '/mes-code/online/cgform/api/getColumns/',
          buttonAction: '/mes-code/online/cgform/api/doButton',
        },
        dictOptions:{
         filedType: [],
         barcodeBinary: [],
         barcodeSource: [],
         status: [],
        },
       

      }
    },

    computed:{
      tableScroll:function(){
        if(this.columns.length > 12){
          return { x: this.columns.length*160+40 }
        }
      }
    },

    created() {
      this.setdefColumns();
      
    },
    methods: {
      setdefColumns(){
        if(this.columns.length > 12){
          let arrLength = this.columns.length-1
          this.columns[arrLength]['fixed'] = 'right'
          this.columns[arrLength]['width'] = 200
          this.columns[0]['width'] = 70
          this.columns[0]['fixed'] = 'left'
        }
      },
      clearList(){
        this.dataSource=[]
        this.selectedRowKeys=[]
        this.ipagination.current = 1
      },
      searchQuery(){
        if(this.searchInput){
          var value=this.searchInput+''
          this.searchList=this.mainId.filter(item=>{return item.barcode.indexOf(value)!=-1})
        }
       
      },
      searchReset(){
        this.searchInput=null
        this.searchList=this.plainOptions
      },
      onChange(checkedList) {
        this.plainOptions.forEach((item,index) => {
          if(item.id==checkedList.target.id){
            item.checked=!item.checked
          }
        });
        this.checkAllfun()

        },
   
    onCheckAllChange(e) {
        if(this.checkAll){
          this.plainOptions.forEach(item=>{
            item.checked=true
          })
        }else{
          this.plainOptions.forEach(item=>{
            item.checked=false
          })
        }
        this.checkAllfun()
    },
    checkAllfun(){
      this.defaultCheckedList=this.plainOptions.filter(item=>item.checked==true)
      if(this.defaultCheckedList.length>=1 && this.defaultCheckedList.length<this.plainOptions.length){
          this.indeterminate=true
        }else{
          this.indeterminate=false
        }
        if(this.plainOptions.length==this.defaultCheckedList.length){
          this.checkAll=true
        }else{
          this.checkAll=false
        }
    },

        //2020/7/9
        initDictConfig(){
        },
          showLinkButton(item,record){
              let btn = new ButtonExpHandler(item.exp,record);
              return btn.show;
          },
                initCgEnhanceJs(enhanceJs){
                  //console.log("--onlineList-js增强",enhanceJs)
                  if(enhanceJs){
                    let Obj = eval ("(" + enhanceJs + ")");
                    this.EnhanceJS = new Obj(getAction,postAction,deleteAction);
                    this.cgButtonJsHandler('created')
                  }else{
                    this.EnhanceJS = ''
                  }
                },
                initCgButtonList(btnList){
                  let linkArr = []
                  let buttonArr = []
                  if(btnList && btnList.length>0){
                    for(let i=0;i<btnList.length;i++){
                      let temp = btnList[i]
                      if(temp.buttonStyle=='button'){
                        buttonArr.push(temp)
                      }else if(temp.buttonStyle=='link'){
                        linkArr.push(temp)
                      }
                    }
                  }
                  this.cgButtonLinkList = [...linkArr]
                  this.cgButtonList=[...buttonArr]
                  console.log("链接增强", this.cgButtonLinkList);
                },
                cgButtonJsHandler(buttonCode){
                  if(this.EnhanceJS[buttonCode]){
                    this.EnhanceJS[buttonCode](this)
                  }
                },
                cgButtonActionHandler(buttonCode){
                  //处理自定义button的 需要配置该button自定义sql
                  if(!this.selectedRowKeys || this.selectedRowKeys.length==0){
                    this.$message.warning("请先选中一条记录")
                    return false
                  }
                  if(this.selectedRowKeys.length>1){
                    this.$message.warning("请只选中一条记录")
                    return false
                  }
                  let params = {
                    formId:this.code,
                    buttonCode:buttonCode,
                    dataId:this.selectedRowKeys[0]
                  }
                  console.log("自定义按钮请求后台参数：",params)
                  postAction(this.url.buttonAction,params).then(res=>{
                    if(res.success){
                      this.loadData()
                      this.$message.success("处理完成!")
                    }else{
                      this.$message.warning("处理失败!")
                    }
                  })

                },
                cgButtonLinkHandler(record,buttonCode,optType){
                  if(optType=="js"){
                    if(this.EnhanceJS[buttonCode]){
                      this.EnhanceJS[buttonCode](this,record)
                    }
                  }else if(optType=="action"){
                    let params = {
                      formId:this.code,
                      buttonCode:buttonCode,
                      dataId:record.id
                    }
                    console.log("自定义按钮link请求后台参数：",params)
                    postAction(this.url.buttonAction,params).then(res=>{
                      if(res.success){
                        this.loadData()
                        this.$message.success("处理完成!")
                      }else{
                        this.$message.warning("处理失败!")
                      }
                    })
                  }
                },
              
        },
       mounted(){
         this.onCheckAllChange()
          this.$emit('fromChild', this.plainOptions)
       }
    }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>
